<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	template="/template/template_dialog.xhtml">
	<ui:define name="head">
		<title>雷击故障分析</title>
		<link rel="stylesheet"
			href="#{request.contextPath}/resources/plugins/datatables/dataTables.bootstrap.css" />
		<style>
#WrapTimeLine {
	height: 100px;
	padding-top: 20px;
}
.box-center {
	display: -webkit-flex; /* Safari */
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	height:60%;
}
</style>
	</ui:define>
	<ui:define name="content">
		<div class="full-center-content-scroll-noheader">
			<h:form id="btnForm">
				<div class="col-sm-12 col-lg-12" style="margin:10px;">
					<p:outputLabel value="选择年份 ：" />
					<h:selectOneMenu disabled="#{thunderDataMiningController.calculating}" value="#{thunderDataMiningController.selectedYear}"
						style="width:130px;margin-right:20px;height:30px">
						<p:ajax event="change" listener="#{thunderDataMiningController.initCurrentChartData}" 
							update="utilForm" oncomplete="getDataByYear()" />
						<f:selectItems value="#{thunderDataMiningController.years}" />
					</h:selectOneMenu>
					<p:commandButton disabled="#{thunderDataMiningController.calculating}" value="重新计算" 
						icon="fa fa-refresh" onclick="startCalculate();" style="float:right;"
						actionListener="#{thunderDataMiningController.calculateLdFaultData}"
						update="utilForm" oncomplete="completeCalculate();" async="true" />
					<p:remoteCommand name="refreshCurrentData" update="utilForm" action="#{thunderDataMiningController.initCurrentChartData}" />
				</div>
			</h:form>
			<h:form id="utilForm">
				<p:remoteCommand name="updateProgressForm" update="progressForm" />
				<p:remoteCommand name="updateBtnForm" update="btnForm" />
				<h:inputHidden id="chartData" value="#{thunderDataMiningController.currentChartData}"></h:inputHidden>
				<h:inputHidden id="selectedYear" value="#{thunderDataMiningController.selectedYear}"></h:inputHidden>
			</h:form>
			<div id="progressDiv" class="col-sm-12 col-lg-12 collapse">
				<h:form id="progressForm">
					#{thunderDataMiningController.ratio}%
					<div class="progress">
						<div class="progress-bar progress-bar-striped" role="progressbar"
							aria-valuenow="#{thunderDataMiningController.ratio}"
							aria-valuemin="0" aria-valuemax="100"
							style="width: #{thunderDataMiningController.ratio}%"></div>
					</div>
				</h:form>
			</div>
			<h:form>
				<div class="row">
					<div class="col-md-6">
						<div class="box box-success">
							<div class="box-header with-border">
								<h3 class="box-title">
								<span class="year"></span>
									年平均雷击电流与雷击次数
								</h3>
							</div>
							<div class="box-body">
								<div id="scotterChart" style="height: 400px;"></div>
							</div>
						</div>
					</div>
					<div class="col-md-6">
						<div class="box box-success">
							<div class="box-header with-border">
								<h3 class="box-title">
									<span class="year"></span>
									年平均雷击电流与故障发生次数
								</h3>
							</div>
							<div class="box-body">
								<div id="pieChart" style="height: 400px;"></div>
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-md-12">
						<div class="box box-success">
							<div class="box-header with-border">
								<h3 class="box-title"><span class="year"></span>年详细信息</h3>
							</div>
							<div class="box-body">
								<table id='infoTb'
									class='table table-bordered table-hover dataTable'>
								</table>
							</div>
						</div>
					</div>
				</div>
			</h:form>
		</div>
	</ui:define>
	<ui:define name="contentend">
		<script src="#{request.contextPath}/resources/js/tables/mytable.js"></script>
		<script
			src="#{request.contextPath}/resources/plugins/datatables/jquery.dataTables.min.js"></script>
		<script
			src="#{request.contextPath}/resources/plugins/datatables/dataTables.bootstrap.min.js"></script>
		<script
			src="#{request.contextPath}/resources/plugins/echarts/echarts.js"></script>
		<script
			src="#{request.contextPath}/resources/js/mycharts/categoryBarChart.js"></script>
		<script src="#{request.contextPath}/resources/js/mycharts/pieChart.js"></script>
		<script src="thunderDataMining.js"></script>
		<script>
			$(function() {
				var t1 = window.setInterval(function() {
					var w = $(".row").width();
					if (w != "0"){
						$("#timeLine").width(Number(w) - 50);
						$("#barChart").width(Number(w) / 2 - 50);
						$("#pieChart").width(Number(w) / 2 - 50);
						clearInterval(t1);
						var syear = document.getElementById('utilForm:selectedYear');
						getDataByYear(syear.value);
					}
				});

			})
		</script>
	</ui:define>
</ui:composition>